import React, { Component } from 'react';
import './style/leftBox.css';
import house from '../components/style/imgs/house2.png';
import rect from '../components/style/imgs/rect.png';
import $ from  'jquery';

class LeftBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      obj: '{"type": "rect", "width": "100", "height": "50"}',
      img: '{"type": "image", "width": "300", "height": "300", "xlinkHref": "./imgs/house2.png"}'
    };
  }

  divDetail = (e) => {
    const { accpetSvg } = this.props;
    const objAttr = JSON.parse(e.currentTarget.getAttribute('data-value'));
    accpetSvg(objAttr);
    var boarddiv = `<div id="moveIng"></div>`;
    $(document.body).append(boarddiv);
    $('#moveIng').css({
      'height': objAttr.height,
      'width': objAttr.width,
    });
  }

  render() {
    const { obj, img } = this.state;
    return (
      <div className="leftBox">
        <div className="leftBox-rect leftBox-div" data-value={obj} onMouseDown={this.divDetail}>
          <img src={rect} alt=""/>
        </div>
        <div className="leftBox-img leftBox-div" data-value={img} onMouseDown={this.divDetail}>
          <img src={house} alt=""/>
        </div>
      </div>
    );
  }
}


export default LeftBox;

